<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }

        .box{
            width: 500px;
            border: 1px solid gray;
            padding: 10px;
        }
        
        .title{
            display: flex;
            padding: 5px 0px;
            margin-bottom: 10px;
            height: 30px;
            line-height: 30px;
            justify-content: space-between;
        }

        ul{
            display: flex;
        }

        .title>ul li{
            padding: 0px 10px;
            list-style: none;
        }

        li:hover{
            background-color: gray;
        }

        /* 点击事件所需要的css */
        .active{
            color: red;
            text-decoration:underline ;
        }
        img{
           width: 500px; 
           display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="title">
            <h2>兰盺硕</h2>
            <ul>
                <li class="active">精选</li>
                <li>美食</li>
                <li>百货</li>
                <li>个护</li>
                <li>预告</li>
           </ul>
        </div>
        <img src="../第五单元作业/images/course01.png">
    </div>

    <script>
    // 主要核心是类的切换，设定一个当前类，可以让当前元素高亮
    // 鼠标经过当前选项卡，先移除其余元素身上的当前类，而只给当前元素添加类
    // 注意，当前类只能有一个
        let arrimg = [
            {url:'../第五单元作业/images/course01.png'},
            {url:'../第五单元作业/images/course02.png'},
            {url:'../第五单元作业/images/course03.png'},
            {url:'../第五单元作业/images/course04.png'},
            {url:'../第五单元作业/images/course05.png'}
        ]

        const img = document.querySelector('img')
        const lis = document.querySelectorAll('ul li')
        
        for(let i = 0 ; i<lis.length;i++){
            lis[i].addEventListener('click',function(){
                img.src = arrimg[i].url
                // lis[i].classList.remove('active')
                const scli = document.querySelector('ul .active')
                scli.classList.remove('active')
                lis[i].classList.add('active')
            })
        }
        
    </script>


</body>
</html>